
    <div id="brand_search_box" class="col-lg-4 col-md-4 col-sm-12 col-xm-12">
        <input type="text" class="form-control" id="brandsearch" autocorrect="off" autocomplete="off" placeholder="<?php echo $this->__('Search by name'); ?>">
        <ul id="searchbrand" class="searchbrand" style="display: none;"></ul>
    </div>

<script type="text/javascript" charset="utf-8">

    var searchWidth = 35;
    var brands = <?php echo json_encode($this->getSearchData()); ?>;
    var brandIndex = 0;
    $('brandsearch').observe('input', function() {
        
        $('searchbrand').innerHTML = '';
        var count = 0;
        brands.each(function(el) {
            if (el.n.toLowerCase().search($('brandsearch').value.toLowerCase()) != -1) {
                count++;
                $('searchbrand').insert('<li  onclick="redirect(\'' + el.k + '\',\'' + el.k + '\')">' + el.n + '</li>');
            }
        });
        $('searchbrand').show();
        brandIndex = 0;
        if (count) {
            $$('#searchbrand li')[0].addClassName('selected');
        }
    });
    var click = $$('body').first().observe('click', function(event) {
        if (Event.element(event).id == 'brandsearch' || Event.element(event).id == 'searchbrand')
            return;
        else
            $('searchbrand').hide();
            $('searchbrand').innerHTML = '';
    });

    $('brandsearch').observe('keyup', function(event) {
        $('searchbrand').show();
        if (event.keyCode == 38 || event.keyCode == 40) {
            if ($F('brandsearch') == '' && !$$('#searchbrand li').length)
                brands.each(function(el) {
                    $('searchbrand').insert('<li  onclick="redirect(\'' + el.k + '\',\'' + el.n + '\')">' + el.n + '</li>');
                });
            $$('#searchbrand li')[brandIndex].removeClassName('selected');
            getSelectedIndex(event.keyCode);
            $$('#searchbrand li')[brandIndex].addClassName('selected');
            searchScroll();
            $('brandsearch').value = $$('#searchbrand li.selected').first().textContent;
        }
        if (event.keyCode == 13) {
            $('brandsearch').value = '';
            if ($$('#searchbrand li.selected').first())
                $$('#searchbrand li.selected').first().click();
        }
    });
    function searchScroll() {
        if ($('searchbrand').scrollTop > brandIndex * searchWidth)
            $('searchbrand').scrollTop = brandIndex * searchWidth;
        else if ($('searchbrand').scrollTop + 8 * searchWidth < brandIndex * searchWidth)
            $('searchbrand').scrollTop = brandIndex * searchWidth - 7 * searchWidth;
    }

    function getSelectedIndex(keycode) {
        var length = $$('#searchbrand li').length;
        if (keycode == 38 && brandIndex == 0)
            brandIndex = length - 1;
        else if (keycode == 40 && brandIndex == (length - 1))
            brandIndex = 0;
        else if (keycode == 38)
            brandIndex--;
        else if (keycode == 40)
            brandIndex++;
    }
    function redirect(url_key, name) {
        $('brandsearch').value = name;
        window.location.href = '<?php echo Mage::getBaseUrl(); ?>' + url_key;
    }
</script>


